<!-- 村级服务类事项清单 -->
<template>
	<div class='fuwulei-page-item-one'>
		<!-- 自定义面包屑导航 -->
		<breadcrumb-nav>
			<el-breadcrumb-item>村级服务类事项清单</el-breadcrumb-item>
		</breadcrumb-nav>


		<!-- 搜索用户 -->
		<div class="search">
			<el-button type="primary" round @click='addImg'>添加图片</el-button>
		</div>
		<!-- 表格组件 -->
		<el-table v-if="tableDatas" :data="tableDatas" stripe style="width: 100%"  v-loading="loading">
			<el-table-column type="index" label="序号" width="70">
			</el-table-column>
			<el-table-column prop="create_date" label="添加日期" width="250">
			</el-table-column>
			<el-table-column prop="image" label="图片">
				<template slot-scope='scope'>
					<el-image lazy style="width: 100px; " :src="scope.row.image" :preview-src-list="[scope.row.image]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope='scope'>
					<el-button type="danger" @click='deletImg(scope.row._id)'>删除图片</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 底部分页组件 -->
		<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="tableData.length"
		 :current-page="currentPage" :page-size="pagesize"></el-pagination>


	</div>
</template>

<script>
	import pageMixin from "@/common/mixins/paging"; //引入混入对象
	export default {
		mixins: [pageMixin],
		name: 'page-item-one',
		data() {
			return {
              loading: true
			}
		},
		created() {
			this.getPageItemOne()//http获取数据
            
		},
		methods: {
			//http获取村情简介数据
			getPageItemOne() {
				this.$http.getCunQingJianJie({
						type: 'fuwulei'
					})
					.then(res => {
						this.loading =false
						const {
							data,
							msg
						} = res
						this.tableData = data

					})
			},
			// 添加图片
			addImg() {
				uni.chooseImage({
					count: 9, //最多可以选择的图片张数，默认9
					success: (data) => {
						this.loading = true
						const tempFilePath = data.tempFilePaths[0]
						const imgPhat = data.tempFiles[0].name
						uniCloud.uploadFile({
							filePath: tempFilePath,
							cloudPath: imgPhat,
							success: (backdata) => {
								this.$http.addImg({
										image: backdata.fileID,
										time: this.Utils.todayDate2(),
										type: 'fuwulei'
									})
									.then(req => {
										if (req.status == 200){
											this.loading =false
											this.getPageItemOne() //重新获取数据列表
										} 
									}) //上传图片到服务器

							}
						})
					},
					fail: (req) => {
						console.log('失败', req)
					}
				})
			},
			//更具id删除图片
			deletImg(imgId) {
				this.$confirm('此操作将永久删除该图片, 是否继续?', {
					confirmButtonText: '确定删除',
					cancelButtonText: '再想想',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http.deletImg({
						id: imgId,
						type: 'fuwulei'
					}).then(req => {
						this.loading = false
						const {
							status,
							msg
						} = req
						if (status == 200) {
							
							this.$message({
								type: 'success',
								message: msg
							});
							this.getPageItemOne() //重新获取数据列表
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})


			}
		},

	}
</script>

<style lang="scss" scoped>
	.fuwulei-page-item-one {
		.search {
			margin: 10px 0;
		}


	}
</style>
<style lang="scss">
	.el-pagination {
		text-align: center;
		margin-top: 30px;

		/deep/ .btn-prev {
			height: 30px;
			border: 0;
		}

		/deep/ .btn-next {
			height: 30px;
			border: 0;
		}


	}
</style>
